<template>
  <el-dialog
    :title="
      modalData.id ? $t('Tenant.editTenant') : $t('Tenant.addTenant')
    "
    :visible="visible"
    :center="true"
    :close-on-click-modal="false"
    width="855px"
    @close="onClose"
    @open="onOpen"
  >
    <el-form
      :ref="refName"
      :label-position="labelPosition"
      :model="information"
      :rules="rules"
      class="demo-form-inline"
      label-width="170px"
    >
      <div class="formTitle">{{ $t('Tenant.TenantInformation') }}</div>
      <el-form-item
        :label="$t('Tenant.enterpriseName')"
        prop="name"
      >
        <el-input
          v-model="information.name"
          :placeholder="$t('Tenant.importCompauyName')"
          class="setWidth"
        />
      </el-form-item>
      <el-form-item :label="$t('Tenant.companyNames')" prop="companyNames">
        <el-select
          v-model="information.companyNames"
          :placeholder="$t('Tenant.selectCompany')"
          class="setWidth"
          @change="changeValue"
        >
          <el-option
            v-for="roleItem in companyList"
            :key="roleItem.id"
            :label="roleItem.name"
            :value="roleItem.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('Tenant.address')">
        <el-cascader
          v-model="information.address"
          :style="{ width: '300px' }"
          :options="addressTree"
          :props="{ expandTrigger: 'hover' }"
          :placeholder="$t('Tenant.Province')"
          class="setWidth"
        />
        <el-input
          v-model="information.addr"
          :placeholder="$t('Tenant.importAdress')"
          class="setWidth setAddress"
        />
      </el-form-item>

      <div class="formTitle">{{ $t('Tenant.buyService') }}</div>
      <el-form-item class="buyServe">
        <el-checkbox
          :label="$t('Tenant.analysis')"
          checked
          disabled
          class="formCheck"
        >
          {{ $t('Tenant.analysis') }}
        </el-checkbox>
        <el-checkbox :label="$t('Tenant.workOrder')" checked disabled>{{
          $t('Tenant.workOrder')
        }}</el-checkbox>
      </el-form-item>

      <div class="formTitle">{{ $t('Tenant.tenantUsers') }}</div>
      <el-form-item :label="$t('Tenant.userNumber')">
        <el-radio checked disabled>3</el-radio>
      </el-form-item>

      <el-row>
        <el-col :span="4" class="tenantTitle">
          <div class="adminiStrator">{{ $t('Tenant.administrator') }}</div>
        </el-col>
        <el-col :span="10">
          <el-form-item :label="$t('Tenant.username')" prop="userName" class="userName">
            <el-input
              v-model="information.userName"
              :placeholder="$t('Tenant.importUsername')"
              :disabled="!!modalData.id"
            />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item :label="$t('Tenant.telPhone')" prop="telPhone" class="telPhone">
            <el-input
              v-model="information.telPhone"
              :placeholder="$t('Tenant.importTel')"
              :disabled="!!modalData.id"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item :label="$t('Tenant.datasourceId')" prop="datasourceId" class="dataOrigin">
            <el-select
              v-model="information.datasourceId"
              class="setWidth"
      
              :placeholder="$t('Tenant.importDatasourceId')"
            >
              <el-option
                v-for="item in datasourceList"
                :key="item.id"
                :label="item.title"
                :title="`${item.ip}:${item.port}/${item.dbName}`"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item
            :label="$t('Tenant.localDatasourceId')"
            prop="localDatasourceId"
            class="localData"
          >
            <el-select
              v-model="information.localDatasourceId"
  
              :placeholder="$t('Tenant.importLocalDatasourceId')"
              class="setWidth"
            >
              <el-option
                v-for="item in localDatasourceList"
                :key="item.id"
                :label="item.title"
                :title="`${item.ip}:${item.port}/${item.dbName}`"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" style="text-align: center">
      <el-button @click="onClose">{{ $t('btns.cancel') }}</el-button>
      <el-button type="primary" :loading="loading" @click="submitForm">
        {{ $t('btns.confirm') }}
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapGetters, mapState } from 'vuex'

export default {
  props: {
    visible: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return {
      refName: 'information',
      labelPosition: 'right',
      information: {},
      companyIds: '',
      rules: {
        // 必选项
        name: [
          {
            required: true,
            message: this.$t('Tenant.importCompauyName'),
            trigger: 'blur'
          }
        ],
        companyNames: [
          {
            required: true,
            message: this.$t('Tenant.selectCompany'),
            trigger: 'change'
          }
        ],
        telPhone: [
          {
            required: true,
            message: this.$t('Tenant.importTel'),
            trigger: 'blur'
          }
        ],
        userName: [
          {
            required: true,
            message: this.$t('Tenant.importUsername'),
            trigger: 'blur'
          }
        ],
        datasourceId: [
          {
            required: true,
            message: this.$t('Tenant.importDatasourceId'),
            trigger: 'blur'
          }
        ],
        localDatasourceId: [
          {
            required: true,
            message: this.$t('Tenant.importLocalDatasourceId'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'modalData',
      'loading',
      'addressTree',
      'companyList',
      'commonListMap'
    ]),
    ...mapState('common', {
      datasourceList(state) {
        return (state.dataSourceList || []).filter(({ type }) => type === 1)
      },
      localDatasourceList(state) {
        return (state.dataSourceList || []).filter(({ type }) => type === 0)
      }
    })
  },
  mounted() {
    this.$store.dispatch('getCompanyList')
    this.$store.dispatch('getAddressTree')
    this.$store.dispatch('getCommonList', {
      key: 'dataSourceList'
    })
  },
  methods: {
    // model确定
    submitForm(information) {
      this.$refs[this.refName].validate(valid => {
        if (valid) {
          const {
            addr,
            telPhone,
            name,
            userName,
            address,
            id,
            userId,
            localDatasourceId,
            datasourceId
          } = this.information || {}

          let companyIds = []
          if (this.companyIds.length > 0) {
            companyIds.push(Number(this.companyIds))
          } else {
            companyIds = this.information.companyIds
          }
          // console.log(this.companyIds, 'companyIds')

          const addrName = ['provinceCode', 'cityCode', 'countyCode']
          const newAddress =
            address &&
            address.reduce((newData, value, index) => {
              const newKey = addrName[index]
              newData[newKey] = address[index]
              return newData
            }, {})

          const dmpAuthUser = { telPhone, userName, id: userId }
          const dmpTenant = {
            addr,
            name,
            ...newAddress,
            id,
            localDatasourceId,
            datasourceId
          }

          this.$store.dispatch('tenement/onEditTenement', {
            companyIds,
            dmpAuthUser,
            dmpTenant
          })
        } else {
          return false
        }
      })
    },
    onClose() {
      this.$emit('onClose')
      this.information = {}
      this.$refs[this.refName].resetFields()
    },
    // 查询详情information
    onOpen() {
      this.information = Object.assign({}, this.modalData)
    },
    changeValue(e) {
      this.companyIds = e
    }
  }
}
</script>

<style scoped lang="scss">
.formTitle {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
  background-color: #f4f4f4;
  height: 24px;
  line-height: 24px;
  padding-left: 10px;
}
.demo-form-inline >>> .el-form-item__label {
  font-weight: 500;
  // width: 56px !important; // 姓名
}
.setWidth {
  width: 478px !important;
}
.setAddress{
  margin-top: 10px;
}
.adminiStrator {
  display: inline-block;
  width: 164px;
  text-align: end;
  // margin-left: 14px;
  line-height: 30px;
}
.tenantTitle{
  margin-left: -8px;
}
.userName{
   width: 337px;
    margin-left: -69px;
}
.telPhone{
  width: 337px;
  margin-left: -151px;
}
.dataOrigin{
  width: 596px;
}
.localData{
  width: 596px;
}
</style>
